iT邦幫忙

2024 iThome 鐵人賽

DAY 26
2
自我挑戰組

Web Franework -SASS/SCSS系列 第 26

Day 26 - 加了一個淡入淡出的視覺效果

  • 分享至 

  • xImage
  •  

今天好累,我新增了圖案淡入淡出的效果:

$item-count: 3
$bg-color: null

@if $item-count == 1
  $bg-color: #e74c3c
@else if $item-count == 2
  $bg-color: #f1c40f
@else
  $bg-color: #2ecc71

@keyframes fadeInOut
  0%
    opacity: 0
  50%
    opacity: 1
  100%
    opacity: 0

.container
  display: flex
  justify-content: center
  align-items: center
  height: 100vh
  background-color: $bg-color

.item
  background-color: #fff
  padding: 20px
  color: #333
  font-size: 1.5rem
  border-radius: 8px
  margin: 10px
  opacity: 0
  animation: fadeInOut 2s infinite

明天再繼續。
加油!


上一篇
Day 25 - 又又轉戰
下一篇
Day 27 - 加了一個縮放的視覺效果
系列文
Web Franework -SASS/SCSS30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言